<!--
 * @Author: YNT 2501512800@qq.com
 * @Date: 2023-06-05 11:35:34
 * @LastEditors: YNT 2501512800@qq.com
 * @LastEditTime: 2023-06-13 18:27:35
 * @FilePath: \20220806后台\src\components\echart\stackingchart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="lineChart" class="echart" ref="lineChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Echart",
  props: {
    infoObj: Object
  },
  data() {
    return {
      lineChart: {}
    };
  },
  watch: {
    "infoObj.xdata": function() {
      let _that = this;
      if (this.infoObj.xdata.length > 0) {
        this.lineFun();
        window.addEventListener("resize", function() {
          _that.lineChart.resize();
        });
      }
    }
  },
  mounted() {
    let _that = this;
    if (this.infoObj.xdata.length > 0) {
      this.lineFun();
      window.addEventListener("resize", function() {
        _that.lineChart.resize();
      });
    }
  },
  methods: {

    lineFun() {
      this.lineChart = echarts.init(this.$refs.lineChart);
      let option = {
        title: {
          text: this.infoObj.title,
          left: "20px",
          top:10,
          textStyle: {
            fontSize: 14
          }
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },

        legend: {
          data: this.infoObj.xTips,
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.infoObj.xdata,
        },

        yAxis: {
          type: "value",
          splitLine: {
            show: false
          }
        },

        series:this.infoObj.data,

      };
      this.lineChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.echart {
  min-width: 500px;
  height: 300px;
}
</style>
